<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Views/Exam/echart/echarts.js"></script>
</head>
<body>
 <!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
    <div id="left" style="width: 800px;height:600px;"></div>
    <div id="right" style="width: 800px;height:600px;"></div>
    <style>
      #left{
      float:letf;
      }
      #right{
      float:letf;
      }
    </style>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('left'));
        var myChart2 = echarts.init(document.getElementById('right'));

        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        
        option2 = {
        	    title: {
        	        text: '漏斗图',
        	        subtext: '纯属虚构'
        	    },
        	    tooltip: {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b} : {c}%"
        	    },
        	    toolbox: {
        	        feature: {
        	            dataView: {readOnly: false},
        	            restore: {},
        	            saveAsImage: {}
        	        }
        	    },
        	    legend: {
        	        data: ['展现','点击','访问']
        	    },
        	    calculable: true,
        	    series: [
        	        {
        	            name:'漏斗图',
        	            type:'funnel',
        	            left: '10%',
        	            top: 60,
        	            //x2: 80,
        	            bottom: 60,
        	            width: '80%',
        	            // height: {totalHeight} - y - y2,
        	            min: 0,
        	            max: 100,
        	            minSize: '0%',
        	            maxSize: '100%',
        	            sort: 'descending',
        	            gap: 2,
        	            label: {
        	                normal: {
        	                    show: true,
        	                    position: 'inside'
        	                },
        	                emphasis: {
        	                    textStyle: {
        	                        fontSize: 20
        	                    }
        	                }
        	            },
        	            labelLine: {
        	                normal: {
        	                    length: 10,
        	                    lineStyle: {
        	                        width: 1,
        	                        type: 'solid'
        	                    }
        	                }
        	            },
        	            itemStyle: {
        	                normal: {
        	                    borderColor: '#fff',
        	                    borderWidth: 1
        	                }
        	            },
        	            data: [
        	                {value: 60, name: '访问'},
        	                {value: 80, name: '点击'},
        	                {value: 100, name: '展现'}
        	            ]
        	        }
        	    ]
        	};

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    </script>
</body>
</html>